<!DOCTYPE html>

<html>
	<head>
		<style type="text/css" media="screen">
			body {
				font-size: 14px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}
	
			#test {
				width: 200px;
				height: 300px;
				position: absolute;
				top: 50px;
				left: 150px;
			}
			
			.over {
				display: none;
				position: absolute;
				background-color: #FFFFFF;
			}
		</style>
		
		<link rel="stylesheet" href="../themes/nokia/base.css" type="text/css" media="screen" title="no title" charset="utf-8">
		
		<link rel="stylesheet" href="../themes/custom-theme/ui.all.css" type="text/css" media="screen" title="no title" charset="utf-8">
	
		<script src="../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/jquery/jquery.scrollTo.js" type="text/javascript" charset="utf-8"></script>
	
		<script src="../src/core.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/widget.js" type="text/javascript" charset="utf-8"></script>
		<script src="drag.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
	
		<div id="test" class="ui-widget-header ui-corner-all">
			Drag-me!
		</div>
		<br><br><br><br>
		
		<button id="toggle">
			toggle
		</button>
		
		<script type="text/javascript" charset="utf-8">
		
			jQuery(document).ready(function() {
		
				jQuery('#toggle').click(function() {
					Nokia.util.slide('#test');
				});
				
			});
		
		</script>
	
	</body>
</html>